<template>
  <div>
    <div class="mb10">
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
    <el-form :model="form" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="订单号：" prop="name">{{form.order_code}}</el-form-item>
      <el-form-item label="会员名称：" prop="name">{{form.user_name}}</el-form-item>
      <el-form-item label="手机号：" prop="name">{{form.user_mobile}}</el-form-item>
      <div class="flex logoBox">
        <div>
          <el-popover placement="top-start" trigger="hover">
            <a :href="form.shop_entity.logo" target="_blank" title="查看最大化图片"><img :src="form.shop_entity.logo"
                style="width: 300px;height: 300px" /></a>
            <img slot="reference" @click="$openImg(form.shop_entity.logo)" :src="form.shop_entity.logo"
              style="width: 100px;height: 100px; cursor:pointer" />
          </el-popover>
        </div>
        <div>
          <div>{{form.shop_name}}</div>
          <div>{{form.address}}</div>
        </div>
      </div>
      <el-form-item label="消费金额：" prop="name">{{form.sales_money}}</el-form-item>
      <el-form-item label="打赏比例：" prop="name">{{form.discount_ratio}}%</el-form-item>
      <el-form-item label="打赏金额：" prop="name">{{form.discount_money}}</el-form-item>
      <el-form-item label="付款方式：" prop="name">{{form.pay_mode_name}}</el-form-item>
      <el-form-item label="订单备注：" prop="name">{{form.remark}}</el-form-item>
      <el-form-item label="上报时间：" prop="name">{{form.create_time}}</el-form-item>
      <el-form-item label="商家获得贡献值：" prop="name">{{form.give_shop_commission_able}}</el-form-item>
      <el-form-item label="用户获得贡献值：" prop="name">{{form.give_user_commission_able}}</el-form-item>
      <el-form-item label="商家打赏积分数：" prop="name">{{form.shop_consume_integral_able}}</el-form-item>
      <template v-if="form.member_comments">
        <el-form-item label="评分：" prop="name">
          <div style="margin-top:6px">
            <el-rate v-model="form.member_comments.level"></el-rate>
          </div>
        </el-form-item>
        <el-form-item label="评价：" prop="name">{{form.member_comments.content}}</el-form-item>
        <el-form-item label="评价时间：" prop="name">{{form.member_comments.create_time}}</el-form-item>
      </template>
    </el-form>
    <el-table class="table" :data="form.incomes" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="name" align="center" label="分润记录">
        <template slot-scope="{row}">
          <div>
            <div v-if="row.income_type===0||row.income_type===1||row.income_type===2||row.income_type===3">消费者</div>
            <div v-if="row.income_type===4||row.income_type===5||row.income_type===6||row.income_type===7">商家</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="直销" class-name="spanName">
        <template slot-scope="{row}">
          <div class="divisionBox" v-if="row.income_type===0||row.income_type===4">
            <div> {{row.income_user_name}}</div>
            <div class="division">{{row.income_user_mobile}}</div>
          </div>
          <div class="divisionBox" v-else>
            <div>——</div>
            <div class="division">——</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="团长" class-name="spanName">
        <template slot-scope="{row}">
          <div class="divisionBox" v-if="row.income_type===1||row.income_type===5">
            <div> {{row.income_user_name}}</div>
            <div class="division">{{row.income_user_mobile}}</div>
          </div>
          <div class="divisionBox" v-else>
            <div>——</div>
            <div class="division">——</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="间推团长" class-name="spanName">
        <template slot-scope="{row}">
          <div class="divisionBox" v-if="row.income_type===2||row.income_type===6">
            <div> {{row.income_user_name}}</div>
            <div class="division">{{row.income_user_mobile}}</div>
          </div>
          <div class="divisionBox" v-else>
            <div>——</div>
            <div class="division">——</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="属地收益" class-name="spanName">
        <template slot-scope="{row}">
          <div class="divisionBox" v-if="row.income_type===3||row.income_type===7">
            <div> {{row.income_user_name}}</div>
            <div class="division">{{row.income_user_mobile}}</div>
          </div>
          <div class="divisionBox" v-else>
            <div>——</div>
            <div class="division">——</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import affiliateMerchantApi from '@/api/affiliateMerchantApi.js'
  export default {
    data() {
      return {
        form: {
          rate: 3,
          incomes: [],
          // member_comments: {},
          shop_entity: {},
        },
        payList: [{
            code: 'WE_CHAT',
            name: '微信',
            id: 0
          },
          {
            code: 'ALIPAY',
            name: '支付宝',
            id: 1
          },
          {
            code: 'MONEY',
            name: '现金',
            id: 2
          },
          {
            code: 'WE_CHAT_MONEY',
            name: '微信+现金',
            id: 3
          },
          {
            code: 'ALIPAY_MONEY',
            name: '支付宝+现金',
            id: 4
          },
          {
            code: 'OTHER',
            name: '其他支付',
            id: 5
          }
        ],
      }
    },
    created() {
      let id = this.$route.query.id;
      this.getDetail(id)
    },
    methods: {
      getDetail(id) {
        affiliateMerchantApi.offlineorderInfo(id).then(res => {
          if (res && res.data.code == 200) {
            // if(!res.data.offlineOrder.member_comments)  res.data.offlineOrder.member_comments={}
            this.form = res.data.offlineOrder;
            let obj=this.payList.find((v)=>{
               return v.id===this.form.pay_mode
            })
            this.form.pay_mode_name=obj.name
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
  }

  .divisionBox {
    display: flex;

    >div {
      width: 50%;
      padding: 10px 0;
      text-align: center;
    }

    .division {
      border-left: 1px solid #ebeef5;
    }
  }

  .table /deep/.spanName {
    padding: 0 !important;

    .cell {
      padding: 0 !important;
    }
  }

  .logoBox {
    margin-left: 70px;

    >div {
      margin-right: 20px;
    }
  }
</style>
